<template>
	<div class="update">
		<div class="update_title">
			<router-link to="login">
				<img src="../js/img/prev.png">
			</router-link>
			<p>重置密码</p>
		</div>
		<form action="">
			<div class="user">
				<input type="text" placeholder="账号" v-model="username">
			</div>
			<div class="old">
				<input type="password" placeholder="旧密码" v-model="oldpassWord">
			</div>
			<div class="new">
				<input type="password" placeholder="请输入新密码" v-model="newpassword">
			</div>
			<div class="affirm">
				<input type="password" placeholder="请确认密码" v-model="confirmpassword">
			</div>
			<div class="code">
				<input type="text" placeholder="验证码" v-model="captcha_code">
				<div class="right">
					<a href="#" @click="yanzheng">
						<img :src="datas" alt="" class="test">
						<span class="bu">看不清换一张</span>
					</a>
				</div>
			</div>
			<button @click.prevent="update">确认修改</button>
			<div class="bj" v-show="isstatic">
				<div class="pop_up">
					<img src="../js/img/gantanhao.png" alt="" />
					<p>{{ test }}</p>
					<p class="sure" @click="sure">确认</p>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	export default {
		name: 'update',
		data: function() {
			return {
				username: '',
				oldpassWord: '',
				newpassword: '',
				confirmpassword: '',
				captcha_code: '',
				datas:'',
				isstatic: false,
				test: "",
			}
		},
		computed:{
			usr() {
				return this.$store.state.username;
			},
			password() {
				return this.$store.state.password;
			},
		},
		created() {
			// let obj = this;
			this.update();
			this.yanzheng();
		},
		methods: {
			update: function() {
				let obj = this;
				this.$axios({
					url: 'https://elm.cangdu.org/v1/users/:user_id/addresses',
					method: 'post',
					data:{
						captcha_code: this.captcha_code,
						oldpassWord: this.oldpassWord,
						username: this.username,
						newpassword:this.newpassword,
						confirmpassword:this.confirmpassword,
					}
				}).then(function() {
					// window.console.log(obj.username)
					// window.console.log(obj.$store.state.username);
					
					if ((obj.username == obj.$store.state.username) && (obj.username != '')) {
						if ((obj.oldpassWord == obj.$store.state.password) && (obj.oldpassWord != '')) {
							if ((obj.oldpassWord != obj.newpassword) && (obj.newpassword != '')) {
								if ((obj.newpassword == obj.confirmpassword) && (obj.confirmpassword != '')) {
									if (obj.captcha_code == '') {
										obj.isstatic = true;
										obj.test = '验证码为空'
									}else {
										// window.console.log(obj.$root)
										// obj.$root.status=1
										obj.$store.state.password = obj.newpassword;
										window.console.log(obj.$store.state.password);
										obj.$router.push('login')
									}
								} else{
									obj.isstatic = true;
									obj.test='两次密码不同或为空'
								}
							}else {
								obj.isstatic = true;
								obj.test = '不能与旧密码相同或为空'
							}
						}else {
							obj.isstatic = true;
							obj.test = '密码错误或密码为空'
						}
						
					}else {
						obj.isstatic = true;
						obj.test = '用户名错误或用户名为空'
					}
					
					
				}).catch(function(error){
					window.console.log(error);
				})
			},
			yanzheng: function() {
				let obj = this;
				this.$axios({
					url: 'https://elm.cangdu.org/v1/captchas',
					method: 'post',
				}).then(function(res) {
					obj.datas = res.data.code;
				}).catch(function(err) {
					window.console.log(err)
				})
			},
			sure: function() {
				this.isstatic = false;
			},
		}
	}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.update {
		width: 320px;
		height: 318px;
	}

	.update_title {
		width: 320px;
		height: 39px;
		background-color: #3190E8;
		text-align: center;
		line-height: 39px;
	}

	.update_title img {
		width: 12px;
		height: 20px;
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}

	.update_title p {
		font-size: 18.75px;
		color: white;
	}

	form {
		margin-top: 12px;
	}

	.user {
		width: 320px;
		height: 32px;
		line-height: 32px;
		background-color: white;
		border-bottom: 1px solid gainsboro;
	}

	.old,
	.code,
	.new,
	.affirm {
		width: 320px;
		height: 44px;
		line-height: 44px;
		background-color: white;
		border-bottom: 1px solid gainsboro;
	}

	input {
		width: 153px;
		height: 19px;
		border: none;
		margin-left: 10px;
		outline: none;
		font-size: 16px;
	}

	button {
		width: 300px;
		height: 39px;
		border: none;
		background-color: #4CD964;
		border-radius: 5px;
		margin: 10px 5px 0 5px;
		font-size: 14px;
		color: white;
	}

	.right {
		float: right;
		width: 130px;
		height: 30px;
	}
	.right a{
		width: 100px;
		height: 30px;
		float: right;
		text-decoration: none;
		color: black;
		font-size: 10px;
	}

	.right img {
		width: 70px;
		height: 30px;
	}
	.bj{
		width: 320px;
		height: 568px;
		background-color: rgba(0, 0, 0, 0);
		position: fixed;
		top: 0;
		left: 0;
	}
	.pop_up {
		width: 240px;
		height: 158px;
		background: white;
		border-radius: 10px;
		top: 200px;
		left: 40px;
		position: fixed;
		text-align: center;
	}
	
	.pop_up img {
		height: 60px;
		width: 60px;
		margin-top: 20px;
	}
	.sure {
		width: 240px;
		height: 36px;
		line-height: 36px;
		color: white;
		background-color: #4cd964;
		border-radius: 5px;
		margin-top: 35px;
		font-size: 20px;
	}
	
	.test {
		display: inline-block;
		position: fixed;
		right: 10px;
		padding: 20px 20px;
	}
	
	a {
		text-decoration: none;
	}
</style>
